﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>AngularJS 控制器</title>
    <script type="text/javascript" src="Scripts/angular.js"></script>
</head>
<body>
    <div ng-app="myApp">
        <div ng-controller="myCtrl">

            名:  <input type="text" ng-model="firstName"><br>
            姓:  <input type="text" ng-model="lastName"><br>
            <br>
            姓名: {{firstName + " " + lastName}}

        </div>
        <p>控制器方法</p>
        <div  ng-controller="personCtrl">

            名: <input type="text" ng-model="firstName"><br>
            姓: <input type="text" ng-model="lastName"><br>
            <br>
            姓名: {{fullName()}}

        </div>

        <script>
            var app = angular.module('myApp', []);
            app.controller('myCtrl', function ($scope) {
                $scope.firstName = "John";
                $scope.lastName = "Doe";
            });
            app.controller('personCtrl', function ($scope) {
                $scope.firstName = "John";
                $scope.lastName = "Doe";
                $scope.fullName = function () {
                    return $scope.firstName + " " + $scope.lastName;
                }
            });
        </script>
    </div>
</body>
</html>